<template>
  <div class="supplier_view footer-page">
    <el-form
      ref="viewForm"
      :model="viewForm"
      :rules="rules"
      class="demo-ruleForm"
      :class="{'edit_form':isEdit}"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          label="基本信息"
          name="base"
        >
          <p class="edit-header">
            <span>店铺信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>店铺头像:</label>
                  <div class="flex-1">
                    <preview-img
                      v-if="!isEdit"
                      :img-url="viewForm.photo"
                    />
                    <el-form-item
                      v-else
                      prop="photo"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="viewForm.photo"
                        wrapper-width="95px"
                        wrapper-height="95px"
                        @setVal="(val)=>setUrl('photo',val)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>店铺名称:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.shopname }}</p>
                    <el-form-item
                      v-else
                      prop="shopname"
                    >
                      <el-input
                        v-model="viewForm.shopname"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>经营项目:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.category_name }}</p>
                    <el-form-item
                      v-else
                      prop="category_name"
                    >
                      <el-input
                        v-model="viewForm.category_name"
                        disabled
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>账户类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.account_name }}</p>
                    <el-form-item
                      v-else
                      prop="account"
                    >
                      <el-select
                        v-model="viewForm.account"
                        clearable
                        @change="accountTypeChange"
                      >
                        <el-option
                          label="融资账户"
                          :value="1"
                        />
                        <el-option
                          label="非融资账户"
                          :value="2"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>是否风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.account_type_name }}</p>
                    <el-form-item
                      v-else
                      prop="account_type"
                    >
                      <el-select
                        v-model="viewForm.account_type"
                        clearable
                        :disabled="viewForm.account==1"
                      >
                        <el-option
                          label="风控"
                          :value="1"
                        />
                        <el-option
                          label="不风控"
                          :value="2"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>发票类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.faptype_name }}</p>
                    <el-form-item
                      v-else
                      prop="faptype"
                    >
                      <el-select
                        v-model="viewForm.faptype"
                        clearable
                      >
                        <el-option
                          label="普通发票"
                          value="1"
                        />
                        <el-option
                          label="增值税发票"
                          value="2"
                        />
                        <el-option
                          label="普通发票+增值税发票"
                          value="1,2"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>当前经营位置:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ shopcity }}</p>
                    <el-form-item
                      v-else
                      prop="shopcity"
                    >
                      <el-cascader
                        v-model="viewForm.shopcity"
                        clearable
                        filterable
                        placeholder="请选择当前经营位置"
                        :options="regionList"
                        :props="optionProps"
                        separator="-"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>店铺联系人:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.people }}</p>
                    <el-form-item
                      v-else
                      prop="people"
                    >
                      <el-input
                        v-model="viewForm.people"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>联系人手机号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.contact_tel }}</p>
                    <el-form-item
                      v-else
                      prop="contact_tel"
                    >
                      <el-input
                        v-model="viewForm.contact_tel"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>客服电话:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.mobile }}</p>
                    <el-form-item
                      v-else
                      prop="mobile"
                    >
                      <el-input
                        v-model="viewForm.mobile"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>签署合同类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.contract_type_name }}</p>
                    <el-form-item
                      v-else
                      prop="contract_type"
                    >
                      <el-select
                        v-model="viewForm.contract_type"
                        clearable
                        @change="contractTypeChange"
                      >
                        <el-option
                          label="蚂蚁智能合同"
                          :value="1"
                        />
                        <el-option
                          label="E签宝合同"
                          :value="2"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>签署方式:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.sign_num_name }}</p>
                    <el-form-item
                      v-else
                      prop="sign_num"
                    >
                      <el-select
                        v-model="viewForm.sign_num"
                        clearable
                        :disabled="viewForm.contract_type==1"
                      >
                        <el-option
                          label="自营两方"
                          :value="1"
                        />
                        <el-option
                          label="供应商两方"
                          :value="2"
                        />
                        <el-option
                          label="三方"
                          :value="3"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label>是否开启城市定位:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.is_city_location_name }}</p>
                    <el-form-item
                      v-else
                      prop="is_city_location"
                    >
                      <el-select
                        v-model="viewForm.is_city_location"
                        clearable
                      >
                        <el-option
                          label="开启"
                          :value="1"
                        />
                        <el-option
                          label="关闭"
                          :value="2"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>店铺邮箱:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.email }}</p>
                    <el-form-item
                      v-else
                      prop="email"
                    >
                      <el-input
                        v-model="viewForm.email"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
              <el-col
                v-if="isEdit"
                :span="24"
              >
                <div class="flex">
                  <label><span class="required-icon">*</span>是否开启城市定位:</label>
                  <div class="flex-1">
                    <el-form-item prop="is_city_location">
                      <el-select
                        clearable
                        v-model="viewForm.is_city_location"
                      >
                        <el-option
                          label="开启"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="关闭"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row> -->
          </div>
          <p class="edit-header">
            <span>公司信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>公司名称:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.mechanism }}</p>
                    <el-form-item
                      v-else
                      prop="mechanism"
                    >
                      <el-input
                        v-model="viewForm.mechanism"
                        clearable
                        :maxlength="10"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>工商注册号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.companyid }}</p>
                    <el-form-item
                      v-else
                      prop="companyid"
                    >
                      <el-input
                        v-model="viewForm.companyid"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex area_item">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>公司所在区域:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ companyArea }}</p>
                    <el-form-item
                      v-else
                      prop="company_area"
                    >
                      <el-cascader
                        v-model="viewForm.company_area"
                        clearable
                        filterable
                        placeholder="请选择公司所在区域"
                        :options="areaList"
                        :props="optionProps"
                        separator="-"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>公司地址:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.company }}</p>
                    <el-form-item
                      v-else
                      prop="company"
                    >
                      <el-input
                        v-model="viewForm.company"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>法人姓名:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.faname }}</p>
                    <el-form-item
                      v-else
                      prop="faname"
                    >
                      <el-input
                        v-model="viewForm.faname"
                        clearable
                        :maxlength="10"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>法人身份证号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.idcard }}</p>
                    <el-form-item
                      v-else
                      prop="idcard"
                    >
                      <el-input
                        v-model="viewForm.idcard"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>营业执照:</label>
                  <div class="flex-1">
                    <preview-img
                      v-if="!isEdit"
                      :img-url="viewForm.shopcard"
                    />
                    <el-form-item
                      v-else
                      prop="shopcard"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="viewForm.shopcard"
                        wrapper-width="95px"
                        wrapper-height="95px"
                        @setVal="(val)=>setUrl('shopcard',val)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>公司门头照:</label>
                  <div class="flex-1">
                    <preview-img
                      v-if="!isEdit"
                      :img-url="viewForm.doorphoto"
                    />
                    <el-form-item
                      v-else
                      prop="doorphoto"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="viewForm.doorphoto"
                        wrapper-width="95px"
                        wrapper-height="95px"
                        @setVal="(val)=>setUrl('doorphoto',val)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>公章图片:</label>
                  <div class="flex-1">
                    <preview-img
                      v-if="!isEdit"
                      :img-url="viewForm.seal_url"
                    />
                    <el-form-item
                      v-else
                      prop="seal_url"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="viewForm.seal_url"
                        wrapper-width="95px"
                        wrapper-height="95px"
                        @setVal="(val)=>setUrl('seal_url',val)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>身份证正面照:</label>
                  <div class="flex-1">
                    <preview-img
                      v-if="!isEdit"
                      :img-url="viewForm.faidcard"
                    />
                    <el-form-item
                      v-else
                      prop="faidcard"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="viewForm.faidcard"
                        wrapper-width="95px"
                        wrapper-height="95px"
                        @setVal="(val)=>setUrl('faidcard',val)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>身份证背面照:</label>
                  <div class="flex-1">
                    <preview-img
                      v-if="!isEdit"
                      :img-url="viewForm.faidcard_back"
                    />
                    <el-form-item
                      v-else
                      prop="faidcard_back"
                    >
                      <crop-upload
                        show-type="photo"
                        :init-val="viewForm.faidcard_back"
                        wrapper-width="95px"
                        wrapper-height="95px"
                        @setVal="(val)=>setUrl('faidcard_back',val)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <template v-if="!isEdit">
            <p class="edit-header">
              <span>操作记录</span>
            </p>
            <div class="info_list">
              <el-table :data="tableData">
                <el-table-column
                  prop="operation_content"
                  label="内容"
                />
                <el-table-column
                  prop="operator"
                  label="操作人"
                  width="180"
                />
                <el-table-column
                  prop="operation_time"
                  label="操作时间"
                  width="200"
                />
              </el-table>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane
          label="提现信息"
          name="withdraw"
        >
          <p class="edit-header">
            <span>支付宝信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label>支付宝姓名:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.payeename }}</p>
                    <el-form-item
                      v-else
                      prop="payeename"
                    >
                      <el-input
                        v-model="viewForm.payeename"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label>支付宝账号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.alipayaccount }}</p>
                    <el-form-item
                      v-else
                      prop="alipayaccount"
                    >
                      <el-input
                        v-model="viewForm.alipayaccount"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="增值服务信息"
          name="service"
        >
          <p class="edit-header">
            <span>短信增值服务信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>短信剩余数量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.sms_num }}</p>
                    <el-form-item
                      v-else
                      prop="sms_num"
                    >
                      <el-input
                        v-model="viewForm.sms_num"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>百融风控信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启百融风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_status == 1? '开启' : '关闭' }}</p>
                    <el-form-item
                      v-else
                      class="guarantee_item"
                      style="margin-bottom:0"
                    >
                      <el-select
                        v-model="viewForm.risk_credit_status"
                        style="width:100px;margin-bottom:10px"
                        clearable
                      >
                        <el-option
                          label="开启"
                          :value="1"
                        />
                        <el-option
                          label="关闭"
                          :value="2"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>百融风控余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_amount }}</p>
                    <el-form-item
                      v-else
                      prop="risk_credit_amount"
                    >
                      <el-input
                        v-model="viewForm.risk_credit_amount"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>征信信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                    v-if="isEdit"
                    class="required-icon"
                  >*</span>征信余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.wong_num }}</p>
                    <el-form-item
                      v-else
                      prop="wong_num"
                    >
                      <el-input
                        v-model="viewForm.wong_num"
                        clearable
                      />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>蚂蚁链与保险</span>
          </p>
          <span style="color:red">注意：保险开启必须开启蚂蚁链，关闭蚂蚁链同时会关闭保险</span>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启自动上链:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.isCanTWC == 0? '开启' : '关闭' }}</p>
                    <el-form-item
                      v-else
                      class="guarantee_item"
                      style="margin-bottom:0"
                    >
                      <el-select
                        v-model="viewForm.isCanTWC"
                        style="width:100px;margin-bottom:10px"
                        clearable
                        @change="TWCAndPolicyChange(1)"
                      >
                        <el-option
                          label="开启"
                          :value="0"
                        />
                        <el-option
                          label="关闭"
                          :value="1"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启自动投保:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.isCanPolicy == 0? '开启' : '关闭' }}</p>
                    <el-form-item
                      v-else
                      class="guarantee_item"
                      style="margin-bottom:0"
                    >
                      <el-select
                        v-model="viewForm.isCanPolicy"
                        style="width:100px;margin-bottom:10px"
                        clearable
                        @change="TWCAndPolicyChange(2)"
                      >
                        <el-option
                          label="开启"
                          :value="0"
                        />
                        <el-option
                          label="关闭"
                          :value="1"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div
      v-if="$hasMethod('#edit')"
      class="page-footer-btns"
    >
      <template v-if="!isEdit">
        <el-button
          size="small"
          @click="$router.back()"
        >返回</el-button>
        <el-button
          size="small"
          type="primary"
          @click="isEdit=true"
        >修改信息</el-button>
      </template>
      <template v-else>
        <el-button
          size="small"
          @click="cancelEdit"
        >返回</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
        >保存</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import previewImg from '@/components/previewImg'
import { getSupplierInfo, editSupplier } from '@/api/user'
import cropUpload from '@/components/cropUpload'
import { checkPhone, checkCompanyId, checkCardId, checkMobile, checkName, checkAlipayAccount, checkEmail } from '@/utils/validate'
import { getRegion } from '@/api/order'
export default {
  components: { previewImg, cropUpload },
  props: ['viewId', 'toEdit'],
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!checkPhone(value) && !checkMobile(value)) {
        callback(new Error('客服电话格式错误'))
      } else {
        callback()
      }
    }
    const validateTel = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error('联系人手机号格式错误'))
      } else {
        callback()
      }
    }
    const validateCompanyId = (rule, value, callback) => {
      if (!checkCompanyId(value)) {
        callback(new Error('工商注册号格式错误'))
      } else {
        callback()
      }
    }
    const validateIdcard = (rule, value, callback) => {
      if (!checkCardId(value)) {
        callback(new Error('法人身份证号格式错误'))
      } else {
        callback()
      }
    }
    const validateName = (rule, value, callback) => {
      if (value && !checkName(value)) {
        callback(new Error('支付宝姓名格式错误'))
      } else {
        callback()
      }
    }
    const validateAccount = (rule, value, callback) => {
      if (value && !checkAlipayAccount(value)) {
        callback(new Error('支付宝账号格式错误'))
      } else {
        callback()
      }
    }
    const validateCount = (rule, value, callback) => {
      if (/^(\-|\+)?\d+(\.\d+)?$/.test(value)) {
        callback()
      } else {
        callback(new Error('数量输入错误'))
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (value && !checkEmail(value)) {
        callback(new Error('店铺邮箱格式错误'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'base',
      isEdit: false,
      tableData: [],
      viewForm: {},
      rules: {
        shopname: [
          { required: true, message: '店铺名称不能为空', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请选择账户类型', trigger: 'change' }
        ],
        account_type: [
          { required: true, message: '请选择是否开启风控', trigger: 'change' }
        ],
        faptype: [
          { required: true, message: '请选择发票类型', trigger: 'change' }
        ],
        shopcity: [
          { required: true, message: '当前经营位置不能为空', trigger: 'change' }
        ],
        people: [
          { required: true, message: '店铺联系人不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '客服电话不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        contact_tel: [
          { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
          { validator: validateTel, trigger: 'blur' }
        ],
        contract_type: [
          { required: true, message: '请签署合同类型', trigger: 'change' }
        ],
        sign_num: [
          { required: true, message: '请选择签署方式', trigger: 'change' }
        ],
        mechanism: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '店铺邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        companyid: [
          { required: true, message: '工商注册号不能为空', trigger: 'blur' },
          { validator: validateCompanyId, trigger: 'blur' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ],
        company: [
          { required: true, message: '公司地址不能为空', trigger: 'blur' }
        ],
        faname: [
          { required: true, message: '法人姓名不能为空', trigger: 'blur' }
        ],
        idcard: [
          { required: true, message: '法人身份证号不能为空', trigger: 'blur' },
          { validator: validateIdcard, trigger: 'blur' }
        ],
        shopcard: [
          { required: true, message: '请上传营业执照', trigger: 'change' }
        ],
        photo: [
          { required: true, message: '请上传店铺头像', trigger: 'change' }
        ],
        doorphoto: [
          { required: true, message: '请上传公司门头照', trigger: 'change' }
        ],
        seal_url: [
          { required: true, message: '请上传公章图片', trigger: 'change' }
        ],
        faidcard: [
          { required: true, message: '请上传身份证正面照', trigger: 'change' }
        ],
        faidcard_back: [
          { required: true, message: '请上传身份证背面照', trigger: 'change' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ],
        is_city_location: [
          { required: true, message: '请选择是否开启城市定位', trigger: 'change' }
        ],
        // payeename: [
        //   // { required: true, message: '支付宝姓名不能为空', trigger: 'blur' },
        //   { validator: validateName, trigger: 'blur' }
        // ],
        alipayaccount: [
          // { required: true, message: '支付宝账号不能为空', trigger: 'blur' },
          { validator: validateAccount, trigger: 'blur' }
        ],
        sms_num: [
          { required: true, message: '短信剩余数量不能为空', trigger: 'blur' },
          { validator: validateCount, trigger: 'blur' }
        ],
        risk_credit_amount: [
          { required: true, message: '风控余量不能为空', trigger: 'blur' },
          { validator: validateCount, trigger: 'blur' }
        ],
        wong_num: [
          { required: true, message: '征信不能为空', trigger: 'blur' },
          { validator: validateCount, trigger: 'blur' }
        ]
      },
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      regionList: [],
      areaList: [],
      shopcity: '',
      companyArea: ''
    }
  },
  mounted() {
    this.getData()
    this.getProvice()
  },
  methods: {
    // 蚂蚁链与保险变化监听,1蚂蚁链变化，2保险变化
    TWCAndPolicyChange(type) {
      if (type == 1) {
        if (this.viewForm.isCanTWC == 1) {
          this.viewForm.isCanPolicy = 1
        }
      } else {
        if (this.viewForm.isCanPolicy == 0) {
          this.viewForm.isCanTWC = 0
        }
      }
    },
    getAreaId(arr) {
      for (const p of this.areaList) {
        if (p.name == arr[0]) {
          for (const c of p.sub) {
            if (c.name == arr[1]) {
              return c.id
            }
          }
        }
      }
      return ''
    },
    contractTypeChange(val) {
      if (val == 1) {
        this.viewForm.sign_num = 1
      }
    },
    accountTypeChange(val) {
      if (val == 1) {
        this.viewForm.account_type = 1
      }
    },
    setUrl(key, value) {
      this.viewForm[key] = value
    },
    handleTabClick(tab, event) {
      // this.cancelEdit();
    },
    // 取消更改
    cancelEdit() {
      if (this.toEdit) {
        this.$router.back()
      } else {
        this.isEdit = false
        this.getData()
      }
    },
    // 保存提交
    submit() {
      this.$refs['viewForm'].validate((valid) => {
        if (valid) {
          const params = {
            photo: '',
            shopname: '',
            account: null,
            account_type: null,
            faptype: '',
            shopcity: '',
            people: '',
            mobile: '',
            email: '',
            contact_tel: '',
            contract_type: null,
            sign_num: null,
            mechanism: '',
            companyid: '',
            company_area: '',
            area_id: '',
            company: '',
            faname: '',
            idcard: '',
            shopcard: '',
            doorphoto: '',
            seal_url: '',
            faidcard: '',
            faidcard_back: '',
            is_city_location: 2,
            payeename: '',
            alipayaccount: '',
            sms_num: 0,
            risk_credit_status: '',
            risk_credit_amount: '',
            wong_num: '',
            isCanTWC: 1,
            isCanPolicy: 1
          }
          for (const key in params) {
            params[key] = this.viewForm[key]
          }
          params.id = this.viewId
          params.area_id = this.getAreaId(params.company_area)
          params.company_area = params.company_area.join('-')
          params.shopcity = params.shopcity.join('-')
          // console.log(params);
          editSupplier(params).then(res => {
            this.isEdit = false
            this.getData()
          })
        } else {
          this.$message({
            message: '表单信息不完整或有错误，请检查完整表单',
            type: 'error'
          })
          return false
        }
      })
    },
    getData() {
      getSupplierInfo(this.viewId).then(res => {
        // console.log(res);
        this.viewForm = { ...res.shopInfo, ...res.companyInfo, ...res.withdrawInfo, ...res.incrementInfo, ...res.functionSetInfo }
        this.tableData = res.operationRecord
        this.shopcity = this.viewForm.shopcity
        const cityArr = this.viewForm.shopcity.split('-')
        this.viewForm.shopcity = cityArr
        this.companyArea = this.viewForm.company_area
        const areaArr = this.viewForm.company_area.split('-')
        this.viewForm.company_area = areaArr
        if (this.toEdit) {
          this.isEdit = true
          this.$route.meta.title = '编辑供应商资料'
        } else {
          this.$route.meta.title = '查看供应商资料'
        }
      })
    },
    getProvice() {
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : []
        this.areaList = res ? [...res[0].sub] : []
        const index = this.areaList.findIndex(k => k.id == 7459)
        this.areaList.splice(index, 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.supplier_view {
  .info_list {
    padding: 20px 0;
  }
  .el-image {
    width: 95px;
    height: 95px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  label {
    width: 200px;
    margin-right: 10px;
  }
}
.item_inline_form {
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  margin-bottom: 10px;
  & > span {
    display: inline-block;
    height: 100%;
    background-color: $gray-bg;
    padding: 0 10px;
    border-right: 1px solid #e6e6e6;
  }
  /deep/.el-input__inner {
    border: none;
  }
}
.tip {
  color: #bbbbbb;
  padding-left: 210px;
}
.edit_form label {
  padding-top: 12px;
}
.required-icon {
  margin-right: 2px;
}
</style>
<style lang="scss">
.guarantee_item,
.area_item {
  .el-select .el-input {
    width: 100%;
  }
}
.area_item .el-form-item {
  margin-bottom: 10px;
}
</style>
